<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {
        /* display: flex; */
        position: relative;
    }
    .box1 {
        /* float: left; */
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
        height: 100vh;
        background-color: aqua;
    }
    .box2 {
        /* flex-grow: 1; */
        /* float: left;
        width: calc(100% - 400px); */
        padding: 0 200px;
        height: 100vh;
        background-color: rgb(27, 11, 135);
    }
    .box3 {
        /* float: left; */
        position: absolute;
        top: 0;
        right: 0;
        width: 200px;
        height: 100vh;
        background-color: rgb(218, 180, 10);
    }
</style>
<body>
    <div class="box">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
    </div>
</body>
<script>
    // 1、静态布局： px作为单位
    // 2、流式布局：网格布局，%作为单位 
    // 3、自适应布局： @media 媒体查询
    // 4、响应式布局： 媒体查询+流式布局+静态布局  （适配多端）
    // 5、rem/em布局: 
    // 6、弹性布局:flex
    // 7、圣杯布局（双飞翼布局）：左右固定，中间自适应
    //     (1)flex布局：扩张因子  flex-grow:1
    //     (2)浮动：计算 calc() 运算符左右是空格
    //     (3)定位：内边距
</script>
<script>
    // 圣杯布局
</script>
</html>